<template>
  <div>
    <div>
      <a-button class="frebtn" @click="backClient">返回客户列表</a-button>
    </div>
    <div class="top">
      <div id="components-form-demo-advanced-search">
        <a-row :gutter="24" style="margin-bottom: 15px">
          <a-col :span="6">
            <div class="label">客户编号：</div>
            <a-select
              show-search
              option-filter-prop="children"
              style="width: 60%"
              placeholder="客户编号"
              :filter-option="filterOption"
              v-model="searchData.csrId"
            >
              <a-select-option
                :value="item.tenantId"
                v-for="item in accArray"
                :key="item.id"
                :titles="item.title"
              >
                {{ item.companyName + "/" + item.tenantId }}
              </a-select-option>
            </a-select>
          </a-col>
          <a-col :span="6">
            <div class="label">客户姓名：</div>
            <a-input
            :maxLength="128"
              placeholder="客户姓名"
              v-model.trim="searchData.companyName"
            />
          </a-col>
          <a-col :span="6">
            <div class="label">创建时间：</div>
            <a-range-picker
              style="width: 60%"
              :placeholder="['年/月/日', '年/月/日']"
              format="YYYY-MM-DD"
              v-model="dateTime"
              @change="DateChange"
            />
          </a-col>
          <a-col :span="6">
            <span style="margin-left: 20px">
              <a-button type="primary" class="top-btn" @click="searchBtn">
                查询
              </a-button>
              <a-button
                type="primary"
                class="top-btn"
                style="margin-left: 10px"
                @click="resetBtn"
              >
                重置
              </a-button>
            </span>
          </a-col>
        </a-row>
      </div>
    </div>
    <div class="warehouse">
      <div class="were-tit">
        {{ clientData.storeHouseCode + " " + clientData.schemeName }}
      </div>
      <div>客户数：{{ clientData.count }}</div>
    </div>
    <a-table size="small" bordered :data-source="tableData" :pagination="false">
      <a-table-column key="csrId" data-index="csrId" align="center" width="25%">
        <span slot="title">客户编号</span>
        <template slot-scope="text, record">
          {{ record.csrId }}

          <span class="defualt" v-if="record.defualt"> 默认 </span>
        </template>
      </a-table-column>
      <a-table-column
        key="companyName"
        data-index="companyName"
        align="center"
        width="25%"
      >
        <span slot="title">客户姓名</span>
        <template slot-scope="text, record">
          {{ record.companyName || "无" }}
        </template>
      </a-table-column>
      <a-table-column
        key="schemeName"
        data-index="schemeName"
        align="center"
        width="25%"
      >
        <span slot="title">收费方案</span>
        <template slot-scope="text, record">
          {{ record.schemeName || "无" }}
        </template>
      </a-table-column>
      <a-table-column key="count" data-index="count" align="center" width="25%">
        <span slot="title">有效时间</span>
        <template slot-scope="text, record">
          <span>
            {{ (record.startDate || "无") + " - " + (record.endtDate || "无") }}
          </span>
        </template>
      </a-table-column>
    </a-table>
    <!-- 分页器 -->
    <div style="margin: 20px 0; text-align: center">
      <a-config-provider>
        <a-pagination
          :current="searchData.current"
          show-size-changer
          :pageSizeOptions="['10', '20', '30']"
          :show-total="
            (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
          "
          @showSizeChange="showChange"
          :buildOptionText="
            (props) => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
          "
          show-quick-jumper
          :default-current="searchData.current"
          :total="total"
          @change="onChangePage"
        />
      </a-config-provider>
    </div>
  </div>
</template>

<script>
import { warehouseData_clientCost } from "@/apis/system/marketing/warehouseData";
import { mapState } from "vuex";
export default {
  props: ["clientData", "type"],
  data() {
    return {
      dateTime: [],
      searchData: {
        warehouseId: this.clientData.sysStoreHouseId,
        sysChargingSchemeId: this.clientData.sysChargingSchemeId,
        schemeId: this.clientData.schemeId,
        size: 10,
        current: 1,
        startTimeValue: null,
        endTimeValue: null,
        companyName: null,
      },
      tableData: [],
      total: 0,
    };
  },
  mounted() {
    this.getTableList();
  },
  methods: {
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    //搜索日期选择器
    DateChange(date, dateString) {
      date;
      if (dateString && dateString.length > 0) {
        this.searchData.startTimeValue = dateString[0]; //年月日后面必须要有个空格
        this.searchData.endTimeValue = dateString[1]; //年月日后面必须要有个空格
      } else {
        this.searchData.startTimeValue = "";
        this.searchData.endTimeValue = "";
      }
    },
    resetBtn() {
      this.dateTime = [];
      this.searchData = {
        warehouseId: this.clientData.sysStoreHouseId,
        sysChargingSchemeId: this.clientData.sysChargingSchemeId,
        schemeId: this.clientData.schemeId,
        size: 10,
        current: 1,
        startTimeValue: null,
        endTimeValue: null,
        companyName: null,
      };
      this.getTableList();
    },
    searchBtn() {
      this.getTableList();
    },
    backClient() {
      this.$emit("backHome");
    },
    //获取列表的方法
    async getTableList() {
      let res = await warehouseData_clientCost(this.type, this.searchData);
      if (res.code == "200") {
        this.tableData = res.responseBody.records;
        this.total = res.responseBody.total * 1;
      }
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      this.getTableList();
    },
    //页码变更
    showChange(size, current) {
      this.searchData.current = size;
      this.searchData.size = current;
      this.getTableList();
    },
  },
  computed: {
    ...mapState(["accArray"]),
  },
};
</script>

<style lang="less" scoped>
#components-form-demo-advanced-search {
  padding: 5px;
  input {
    width: 60%;
  }
  .ant-col {
    display: flex;
    align-items: center;
    .label {
      width: 100px;
      text-align: right;
    }
  }
}
.frebtn {
  background-color: #66b1ff;
  color: #fff;
  border: #66b1ff;
}
.frebtn:hover {
  background-color: #66b1ff;
  color: #fff;
  border: #66b1ff;
}
.warehouse {
  border-bottom: 2px solid #e8e8e8;
  display: flex;
  flex-direction: column;
  text-align: right;
  margin-bottom: 20px;
  .were-tit {
    font-size: 24px;
    font-weight: bold;
  }
}
</style>